<template>
	<div>
		<carHeader :title="'活动发布'"></carHeader>
		<div class="zong">
			<div class="head">
				<div class="body">
					<div class="body1">
						<div class="bodyhead">
							<div class="son1">
								<div class="son11" :class="{ 'item': true, 'active': activeIndex === 0}"
									@click="changeColor()">
									<span>已上架</span>
								</div>
								<div class="son12" :class="{ 'item': true, 'active': activeIndex === 1 }"
									@click="changeColor1()">
									<span>未上架</span>
								</div>
							</div>
						</div>

						<div v-if="activeIndex===0" v-for="(item,index) in yishanglist" :key="index">

							<div class="bodyhead22" @click="navigateToDetail(item)">
								<p>{{item.riTitle}}</p>

								<p style="color: #bbbbbb;">{{item.riTime}}</p>
								
							</div>
							<button type="primary" class="sonson1" @click="handelClick(item)">下架</button>
						</div>
						<div v-if="activeIndex===1" v-for="(i,index) in weishanglist">
							
								<div class="bodyhead2" @click="navigateToDetail2(i)">
									<p>{{i.riTitle}}</p>
									<p>
											<span
											    :class="[
											        'color1',
											        {
											            'color11': i.riReviewStatus == '0', // 假设状态为字符串形式
											            'color111': i.riReviewStatus == '1',
											            'color1111': i.riReviewStatus == '2'
											        }
											    ]"
											>{{ i.riReviewStatus == '0' ? '审核通过' : 
											    i.riReviewStatus == '1' ? '审核失败' : 
											    i.riReviewStatus == '2' ? '审核中' : '未知状态' }}</span>
											
									</p>
									<p style="color:#bbbbbb;position: relative;">{{i.riTime}}</p>
								</div>
								<button type="primary" class="sonson2"
								        @click="handleClick2(i)">
								  {{ i.riReviewStatus == '0' ? '上架' : '删除' }}
								</button>
						</div>

					</div>
				</div>


			</div>
			<div class="fabu">
				
					<button type="primary" class="hail" @click="fabu()">+发布活动</button>
				
			</div>
			

		</div>


	</div>
</template>

<script>
import index from '../../uni_modules/uview-ui';
	export default {
		data() {
			return {
				riShopId:'',
				index: 0,
				activeIndex: 0,
				index1: '',
				// shenhe: "审核失败",
				yishanglist: [],
				weishanglist: [],
				riId:''
			}
		},
		onShow() {
			uni.request({
				url:"http://localhost:8080/carShop/carShop/activity/list",
				success:(res) =>{
					this.yishanglist=res.data,
					console.log(res.data[0])
				}
			})
		},
		methods: {
		 handelClick(item) {
		        if (item && item.riId) {
		            const id = item.riId; // 提取 id
		            const url = `http://localhost:8080/carShop/carShop/activity/updatestate?id=${id}`; 
		
		            uni.request({
		                url: url,
		                method: 'POST', 
		                success: (res) => {
		                    // 处理成功响应
		                    console.log('Response:', res.data);
		                },
		                fail: (err) => {
		                    // 处理请求失败
		                    console.error('Request failed:', err);
		                }
		            });
		        } else {
		            console.error('Item or riId is missing');
		        }
		    },
			handleClick2(i) {
			  if (i && i.riId) {
			    const id = i.riId;
			    let url = '';
			    
			    if (i.riReviewStatus == '0') {
			      // 上架操作
			      url = `http://localhost:8080/carShop/carShop/activity/updatestate2?id=${id}`;
			    } else {
			      // 删除操作
			      url = `http://localhost:8080/carShop/carShop/activity/deleteActivityById?id=${id}`;
			    }
			    
			    uni.request({
			      url: url,
			      method: 'POST',
			      success: (res) => {
			        // 处理成功响应
			        console.log('Response:', res.data);
			      },
			      fail: (err) => {
			        // 处理请求失败
			        console.error('Request failed:', err);
			      }
			    });
			  } else {
			    console.error('Invalid item or missing ID');
			  }
			},
			 
			fabu(){
				uni.navigateTo({
					url:"/pages/announceActivity/announceActivity?riShopId="+this.riShopId
				})
			},
			  handleAction(action, item) {
			    console.log(`执行 ${action} 操作`, item);
			
			    // 假设这里有后端请求逻辑
			    // 例如：发送请求到后端进行上架或删除操作
			    this.$axios.post('/api/action', { action, itemId: item.id })
			      .then(response => {
			        console.log('操作成功');
			        // 更新界面或其他操作
			      })
			      .catch(error => {
			        console.error('操作失败', error);
			      });
			  },
			changeColor() {
				this.activeIndex = 0;
			},
			changeColor1() {
				this.activeIndex = 1;
				uni.request({
					url:"http://localhost:8080/carShop/carShop/activity/listWei",
					success: (res) => {
						this.weishanglist=res.data
					}
				})
			},
	navigateToDetail(obj) {
	    const id = obj.riId ? obj.riId : ''; // 确保 riId 存在
	    const data = encodeURIComponent(JSON.stringify(obj)); // 其他数据	
	    const url = `/pages/activityDetail/activityDetail?id=${encodeURIComponent(id)}&data=${data}`;
	    uni.navigateTo({  
	        url: url  
	    });  
	},
			navigateToDetail2(obj) {
			console.log(obj + 4444);
			const id = obj.riId ? obj.riId : ''; // 确保 riId 存在
			const data = encodeURIComponent(JSON.stringify(obj)); // 其他数据	
			const url = `/pages/activityDetail/activityDetail?id=${encodeURIComponent(id)}&data=${data}`;
			uni.navigateTo({  
			    url: url  
			});  
			}

		},
		computed: {

		}

	}
</script>

<style>
.fabu{
	position: relative;
	bottom: -90rpx;
}
	.color1 { color: black; } /* 默认颜色 */
	.color11 { color: greenyellow; } /* 审核通过的颜色 */
	.color111 { color: red; } /* 审核失败的颜色 */
	.color1111 { color: orange; } /* 待审核的颜色 */

	* {
		margin: 0;
		padding: 0;
	}

	.zong {
		height: 1300rpx;
		width: 100%;
		background-color: #eeeeee;
		position: relative;
		float: left;
		top: -130px;
	}

	.head {
		height: 340rpx;
		background-color: #2276FF;
		padding-top: 10px;

	}

	.body {
		display: flex;
		background-color: #ffffff;
		/* height: 950rpx; */
		width: 700rpx;
		margin: 0 auto;
		border-radius: 20px;

	}

	.body.bodyheight {
		display: flex;
		height: 500rpx;
		/* 	height: listheight+'px'; */
	}

	.body1 {
		margin: 0 auto;
		/* 	background-color: aquamarine; */
		width: 650rpx;
		/* 	height: 710rpx; */
	}

	.bodyhead {
		height: 125rpx;
		/* 	background-color: aliceblue; */
		border-bottom: 3px solid #eeeeee;
		padding-top: 25px;

	}

	.bodyhead2 {
		height: 230rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead22 {
		height: 140rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead3 {
		height: 230rpx;
		border-bottom: 2px solid #eeeeee;

	}

	.bodyhead33 {
		height: 140rpx;

	}

	.son1 {
		height: 40px;
		margin: 0 auto;
		width: 150px;
		background-color: pink;
		/* padding-top: 10px; */
		border-radius: 30px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #eeeeee;
		/* margin-top: 10px; */
	}

	.son11 {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #eeeeee;
		color: #009AFF;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}

	.son12 {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #009AFF;
		color: #eeeeee;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.item {
		color: #2276FF;
		background-color: #eeeeee;
		font-size: 16px;
	}

	.item.active {
		color: #eeeeee;
		background-color: #2276FF;
	}

	p {
		margin-top: 15px;
	}

	.sonson {
		margin-left: 200px;

		background-color: #009AFF;

		padding: 5px 20px 5px 20px;
		border-radius: 20px;

	}

	.sonson1 {
		/* margin-left: 200px; */
		background-color: #2276FF;
		border-radius: 20px;
		position: relative;
		font-size: 16px;
		line-height: 60rpx;
		width: 160rpx;
		height: 60rpx;
		left: 240px;
		top: -65px;

	}

	.sonson2 {
		/* margin-left: 200px; */
		background-color: #2276FF;
		border-radius: 20px;
		/* 	position: relative; */
		font-size: 16px;
		line-height: 60rpx;
		width: 160rpx;
		height: 60rpx;
		left: 240px;
		top: -80px;

	}

	.bodyhead3 .sonson {
		margin-left: 180px;
	}

	.hail {
		height: 40px;
		width: 250px;
		background-color: #2276FF;
		margin-left: 62px;
		margin-top: 350px;
		border-radius: 20px;
		/* text-align: center; */
		line-height: 40px;
		font-size: 18px;
		/* color: #ffffff; */
		position: fixed;
	}
</style>